<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- cornerstone css - provides some useful css classes -->
    <link href="../../dist/cornerstone.css" rel="stylesheet">

</head>
<body>
<div class="container">

    <h1>
        ctimage/index.html
    </h1>

    This is an example of displaying a ct image along with buttons to set ww/wc presets.  You can
    manually adjust the ww/wc by dragging the left mouse button

    <br>
    <br>

    <!-- note we disable selection on the top most div -->
    <div style="width:512px;height:512px;position:relative;color: white;"
         class="cornerstone-enabled-image"
         oncontextmenu="return false"
         unselectable='on'
         onselectstart='return false;'
         onmousedown='return false;'>
        <div id="dicomImage"
             style="width:512px;height:512px;top:0px;left:0px; position:absolute">
        </div>
        <div id="topleft" style="position: absolute;top:0px; left:0px">
            Patient Name
        </div>
        <div id="topright" style="position: absolute;top:0px; right:0px">
            Hospital
        </div>
        <div id="bottomright" style="position: absolute;bottom:0px; right:0px">
            Zoom:
        </div>
        <div id="bottomleft" style="position: absolute;bottom:0px; left:0px">
            WW/WC:
        </div>

    </div>


    <button id="softTissue" class="btn">Soft Tissue</button>
    <button id="lung" class="btn">Lung</button>
    <button id="bone" class="btn">Bone</button>

</div>
</body>

<!-- cornerstone depends on jQuery so it must be loaded first-->
<script src="../jquery.min.js"></script>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoaderCt.js"></script>

<script>

    $(document).ready(function() {
        // image enable the dicomImage element
        var element = $('#dicomImage').get(0);
        cornerstone.enable(element);

        // load and display the image
        var imageId = 'ctexample://1';
        cornerstone.loadImage(imageId).then(function(image) {
            cornerstone.displayImage(element, image);

            var viewport = cornerstone.getViewport(element);
            $('#bottomright').text("Zoom: " + viewport.scale + "x");
            $('#bottomleft').text("WW/WC:" + Math.round(viewport.voi.windowWidth) + "/" + Math.round(viewport.voi.windowCenter));

            // Add event handler for the ww/wc presets
            $('#softTissue').click(function(e) {
                var viewport = cornerstone.getViewport(element);
                viewport.voi.windowWidth = 400;
                viewport.voi.windowCenter = 20;
                cornerstone.setViewport(element, viewport);
            });

            $('#lung').click(function(e) {
                var viewport = cornerstone.getViewport(element);
                viewport.voi.windowWidth = 1600;
                viewport.voi.windowCenter = -600;
                cornerstone.setViewport(element, viewport);
            });

            $('#bone').click(function(e) {
                var viewport = cornerstone.getViewport(element);
                viewport.voi.windowWidth = 2000;
                viewport.voi.windowCenter = 300;
                cornerstone.setViewport(element, viewport);
            });


            // add event handlers to mouse move to adjust window/center
            $('#dicomImage').mousedown(function(e) {
                var lastX = e.pageX;
                var lastY = e.pageY;

                $(document).mousemove(function(e) {
                    var deltaX = e.pageX - lastX,
                            deltaY = e.pageY - lastY ;
                    lastX = e.pageX;
                    lastY = e.pageY;

                    var viewport = cornerstone.getViewport(element);
                    viewport.voi.windowWidth += (deltaX / viewport.scale);
                    viewport.voi.windowCenter += (deltaY / viewport.scale);
                    cornerstone.setViewport(element, viewport);
                    $('#bottomleft').text("WW/WL:" + Math.round(viewport.voi.windowWidth) + "/" + Math.round(viewport.voi.windowCenter));
                });

                $(document).mouseup(function(e) {
                    $(document).unbind('mousemove');
                    $(document).unbind('mouseup');
                });
            });

        });


    });

</script>
</html>
